<template>
    <jb-crud-page search-url="/api/admin/wechatMedia/datas" :search-conditions="pageConditions" :reset-btn-shown="false">
        <template #title>
            <div class="flex items-center">
                <span>选择</span>
                <span v-if="type==='news'">图文</span>
                <span v-else-if="type==='text'">文本</span>
                <span v-else-if="type==='image'">图片</span>
                <span v-else-if="type==='voice'">音频</span>
                <span v-else-if="type==='video'">视频</span>
                <span v-else-if="type==='music'">音乐</span>
            </div>
        </template>
        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                style="width: 130px"
                placeholder="输入关键字搜索"
            />
        </template>

        <template #default="{ state,list }">
            <vxe-table
                height="auto"
                show-overflow="tooltip"
                :seq-config="{ startIndex: state.tableStartIndex }"
                :column-config="{ resizable: true }"
                border
                show-header-overflow
                :row-config="{ isHover: true }"
                align="center"
                :data="list"
            >
                >
                <jb-column type="seq" title="序号" width="60"></jb-column>
                <jb-column field="avatar" title="头像" width="120">
                    <template #default="{ row }">
                        <n-tooltip trigger="hover">
                            <template #trigger> 图片 </template>
                            点击查看二维码
                        </n-tooltip>
                    </template>
                </jb-column>
                <jb-column field="name" title="名称" min-width="300"></jb-column>

                <jb-column field="enable" title="是否启用" width="80">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.enable"
                            :url="`admin/user/toggleEnable/${row.id}-\${value}`"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column title="操作" fixed="right" width="160">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            icon="uil:edit-alt"
                            secondary
                            type="warning"
                            quaternary
                            circle
                            strong
                            @click="
                                userPage?.showEditModal('编辑公众平台信息', {
                                    id: row.id
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            icon="ant-design:delete-filled"
                            secondary
                            type="error"
                            quaternary
                            circle
                            strong
                            class="mx-8px"
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/wechat/mpinfo/delete/${row.id}`"
                            @success="userPage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </vxe-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import JbCrudPage from "@/components/_builtin/jb-crud-page/index.vue";
import {useResetableData} from "@/hooks/common/use-resetable-data";
import JbBtn from "@/components/_builtin/jb-btn/index.vue";

const props = withDefaults(
    defineProps<{
        mpId:string
        type: string
    }>(),
    {

    }
)

const userPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    type: props.type,
    mpId: props.mpId
})

onMounted(() => {

})

</script>


<style scoped>

</style>